<!--
 * @description  :发起盘库
 * @descriptionDetail:发起盘库
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-10-09 22:21:21
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="title-content">
      <u-form :model="queryForm" label-position="top" class="u-m-t-20" :error-type="errorType" ref="uForm">
        <u-form-item label="盘库方式" :label-width="labelWidth" :required="isRequired" prop="checkType">
          <z-dict-radio :dictType="$u.dic.DIC_KEYS.C_STORE_CHECK_TYPE" v-model="queryForm.checkType"></z-dict-radio>
        </u-form-item>
      </u-form>
      <!-- 全库盘点 -->
      <u-form :model="libraryForm" label-position="top" v-show="queryForm.checkType == C_STORE_CHECK_TYPE.OVERALL" class="u-m-t-20" :error-type="errorType" :rules="libraryRules" ref="libraryuForm">
        <u-form-item label="仓库名称" :label-width="labelWidth" right-icon="arrow-right" :required="isRequired" prop="storeName" ref="townChangeRef">
          <u-select :list="storageList" mode="single-column" v-model="storageShow" @confirm="selectConfirm('storeId','storeName',$event)"></u-select>
          <u-input
            :disabled="true"
            placeholder="请选择所属仓库"
            v-model="libraryForm.storeName"
            @click="storageShow = true"
          />
        </u-form-item>
        <u-form-item label="参与人" :label-width="labelWidth" prop="partPersonName">
          <u-input placeholder="请输入参与人" v-model="libraryForm.partPersonName" />
        </u-form-item>
        <u-form-item label="盘库人" v-show="libraryForm.storeName" :label-width="labelWidth" prop="checker" :required="isRequired">
          <u-input placeholder="请选择盘库人" :disabled="true" :needValid="true" v-model="libraryForm.checker" @click="orgPersonSelectShow = true" />
        </u-form-item>
        <u-form-item label="盘库名称" :label-width="labelWidth" :required="isRequired" prop="checkName">
          <u-input placeholder="请输入盘库名称" v-model="libraryForm.checkName" />
        </u-form-item>
        <u-form-item label="计划盘库时间" :label-width="labelWidth" :required="isRequired" prop="planCheckTime">
          <u-input placeholder="请选择" :disabled="true" :needValid="true" v-model="libraryForm.planCheckTime" @click="dateChange('one')" />
        </u-form-item>
        <u-form-item label="备注" :label-width="labelWidth">
          <u-input type="textarea" placeholder="请填写备注" v-model="libraryForm.remark" />
        </u-form-item>
      </u-form>
      <!-- 随机盘点 -->
      <u-form :model="randomForm" label-position="top" class="u-m-t-20" :error-type="errorType" v-show="queryForm.checkType == C_STORE_CHECK_TYPE.RANDOM" :rules="randomRules" ref="randomuForm">
        <u-form-item label="随机案件数" :label-width="labelWidth" :required="isRequired" prop="checkRandomNum">
          <u-input placeholder="请输入随机案件数" type="number" v-model="randomForm.checkRandomNum" />
        </u-form-item>
        <u-form-item label="盘库名称" :label-width="labelWidth" :required="isRequired" prop="checkName">
          <u-input placeholder="请输入盘库名称" v-model="randomForm.checkName" />
        </u-form-item>
        <u-form-item label="盘库人" :label-width="labelWidth" prop="checker" :required="isRequired">
          <u-input placeholder="请选择盘库人" :disabled="true" :needValid="true" v-model="randomForm.checker" @click="orgPersonSelectShow = true" />
        </u-form-item>
        <u-form-item label="参与人" :label-width="labelWidth" prop="partPersonName">
          <u-input placeholder="请输入参与人" v-model="randomForm.partPersonName" />
        </u-form-item>
        <u-form-item label="计划盘库时间" :label-width="labelWidth" :required="isRequired" prop="planCheckTime">
          <u-input placeholder="请选择" :disabled="true" :needValid="true" v-model="randomForm.planCheckTime" @click="dateChange('two')" />
        </u-form-item>
        <u-form-item label="备注" :label-width="labelWidth">
          <u-input type="textarea" placeholder="请填写备注" v-model="randomForm.remark" />
        </u-form-item>
      </u-form>
      <!-- 指定盘点 -->
      <u-form :model="specifyForm" label-position="top" v-show="queryForm.checkType == C_STORE_CHECK_TYPE.APPOINT" class="u-m-t-20" :error-type="errorType" :rules="specifyRules" ref="specifyuForm">
        <u-form-item label="盘库名称" :label-width="labelWidth" :required="isRequired" prop="checkName">
          <u-input placeholder="请输入盘库名称" v-model="specifyForm.checkName" />
        </u-form-item>
        <u-form-item label="盘库人" :label-width="labelWidth" prop="checker" :required="isRequired">
          <u-input placeholder="请选择盘库人" :disabled="true" :needValid="true" v-model="specifyForm.checker" @click="orgPersonSelectShow = true" />
        </u-form-item>
        <u-form-item label="参与人" :label-width="labelWidth" prop="partPersonName">
          <u-input placeholder="请输入参与人" v-model="specifyForm.partPersonName" />
        </u-form-item>
        <u-form-item label="计划盘库时间" :label-width="labelWidth" :required="isRequired" prop="planCheckTime">
          <u-input placeholder="请选择" :disabled="true" :needValid="true" v-model="specifyForm.planCheckTime" @click="dateChange('three')" />
        </u-form-item>
        <u-form-item label="备注" :label-width="labelWidth">
          <u-input type="textarea" placeholder="请填写备注" v-model="specifyForm.remark" />
        </u-form-item>
      </u-form>
      <view class="" v-show="queryForm.checkType == C_STORE_CHECK_TYPE.APPOINT">
        <case-list @selectList="selectList"></case-list>>
      </view>
      <view class="submit-btns btn-other-cls" style="margin-left:-40rpx">
        <u-button class="u-btn" type="primary" @click="confirmBack">
          确定
        </u-button>
      </view>

      <u-picker mode="time" :params="paramsTime" v-model="dateRange" @confirm="handlerSearchDate" @cancel="showTime = false"></u-picker>
      <!-- 人员选择 -->
      <u-popup mode="bottom" height="80%" v-model="orgPersonSelectShow">
        <org-person-select treeType="zm-case" @choose="handlerChoosePerson"></org-person-select>
      </u-popup>
    </view>
  </view>
</template>

<script>
import storeService from '@/service/store/store.service.js';
import { ZDictRadio, } from '@/components';
import CaseList from './caseList.vue';
import OrgPersonSelect from "./org-people-select";
import {C_STORE_CHECK_TYPE,} from "@/service/store/mapping/enum.js"

export default {
  components: {
    ZDictRadio,
    CaseList,
    OrgPersonSelect,
  },
  data() {
    return {
      isRequired:true,
      errorType: ['border-bottom','message',],
      // 校验规则
      libraryRules:{
        checkName: [{
          required: true,
          message: '请输入盘库名称',
          trigger: ['change', 'blur',],
        },],
        storeName: [{
          required: true,
          message: '请选择仓库名称',
          trigger: 'change',
        },],
        checker: [{
          required: true,
          message: '请选择盘库人',
          trigger: ['change', 'blur',],
        },],
        planCheckTime: [{
          required: true,
          message: '请选择计划盘库时间',
          trigger: 'change',
        },],
      },
      randomRules:{
        checkName: [{
          required: true,
          message: '请输入盘库名称',
          trigger: ['change', 'blur',],
        },],
        checker: [{
          required: true,
          message: '请选择盘库人',
          trigger: ['change', 'blur',],
        },],
        planCheckTime: [{
          required: true,
          message: '请选择计划盘库时间',
          trigger: 'change',
        },],
        checkRandomNum: [{
          required: true,
          message: '请输入随机案件数',
          trigger: ['change', 'blur',],
        },],
      },
      specifyRules:{
        checkName: [{
          required: true,
          message: '请输入盘库名称',
          trigger: ['change', 'blur',],
        },],
        checker: [{
          required: true,
          message: '请选择盘库人',
          trigger: ['change', 'blur',],
        },],
        planCheckTime: [{
          required: true,
          message: '请选择计划盘库时间',
          trigger: 'change',
        },],
      },
      storageShow:false,
      storageList:[],
      oldStorageList:[],
      labelPosition: 'top',
      dateRange: false,
      labelWidth:'180',
      queryForm: {},
      libraryForm:{}, // 全库
      randomForm:{},  // 随机
      specifyForm:{},  // 指定
      // 模式
      paramsTime: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      id:'',
      caseSelectList:[], // 指定盘点选中案件列表
      orgPersonSelectShow: false,
      C_STORE_CHECK_TYPE:C_STORE_CHECK_TYPE,
    };
  },
  computed: {
    uFormRef(){
      let uForm = this.$refs.libraryuForm;
      if(this.queryForm.checkType == C_STORE_CHECK_TYPE.OVERALL){
        uForm = this.$refs.libraryuForm;
      }else if(this.queryForm.checkType == C_STORE_CHECK_TYPE.RANDOM){
        uForm = this.$refs.randomuForm;
      }else if(this.queryForm.checkType == C_STORE_CHECK_TYPE.APPOINT){
        uForm = this.$refs.specifyuForm;
      }
      return uForm;
    },
  },
  onLoad () {

  },
  created () {
    this.$set(this.queryForm,"checkType",C_STORE_CHECK_TYPE.OVERALL)
    this.getStorageList();
  },
  mounted() {
    this.$refs.libraryuForm.setRules(this.libraryRules);
    this.$refs.randomuForm.setRules(this.randomRules);
    this.$refs.specifyuForm.setRules(this.specifyRules);
  },
  methods: {
    getStorageList(){
      let parms = {
        paras:{
          psr: 1,
          storeId: "",
          type: 1,
        },
      }
      storeService.getStoreLst(parms).then(res => {
        this.$nextTick(() => {
          this.oldStorageList = res.data;
          this.storageList = this.handleSelcData(res.data);
        });
      });
    },
    handleSelcData(data){
      let newStreetData = [];
      if(data.length > 0){
        data.forEach(item => {
          newStreetData.push({
            label:item.storeName,
            value:item.storeId,
          })
        });
      }
      return newStreetData;
    },
    selectConfirm(code,name,e){
      this.libraryForm[code] = '';
      this.libraryForm[name] = '';
      e.map((val, index) => {
        this.libraryForm[code] = val.value;
        this.libraryForm[name] =  val.label;
      });
      this.$refs.townChangeRef.validation();
      for(let item of this.oldStorageList){
        if(item['storeId'] == e[0].value){
          this.$set(this.libraryForm,'checker',item['managers']);
          this.$set(this.libraryForm,'checkerUuids',item['managerUuids']);
        }
      }
    },
    dateChange(id){
      this.id = id;
      this.dateRange = true;
    },
    handlerSearchDate(e){
      let time = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
      switch(this.id){
      case 'one':
        this.libraryForm.planCheckTime = time;
        break;
      case 'two':
        this.randomForm.planCheckTime = time;
        break;
      case 'three':
        this.specifyForm.planCheckTime = time;
        break;
      }
    },
    handlerChoosePerson(psrList) {
      let names = [];
      let ids = [];
      psrList.forEach(p => {
        names.push(p.name);
        ids.push(p.id);
      });
      if(this.queryForm.checkType == C_STORE_CHECK_TYPE.RANDOM){  // 随机盘点
        this.randomForm.checkerUuids = ids.join(",");
        this.randomForm.checker = names.join(",");
      }
      else if(this.queryForm.checkType == C_STORE_CHECK_TYPE.APPOINT){  // 指定盘点
        this.specifyForm.checkerUuid = ids.join(",");
        this.specifyForm.checker = names.join(",");
      }else if(this.queryForm.checkType == C_STORE_CHECK_TYPE.OVERALL){  // 全库盘点
        this.libraryForm.checkerUuid = ids.join(",");
        this.libraryForm.checker = names.join(",");
      }
      this.orgPersonSelectShow = false;
    },
    selectList(e){
      this.caseSelectList = e;
    },
    confirmBack(){
      this.uFormRef.validate(valid => {
        if (valid) {
          let form = {};
          if(this.queryForm.checkType == C_STORE_CHECK_TYPE.OVERALL){
            form = this.libraryForm;
          }else if(this.queryForm.checkType == C_STORE_CHECK_TYPE.RANDOM){
            form = this.randomForm;
          }else if(this.queryForm.checkType == C_STORE_CHECK_TYPE.APPOINT){
            if(!this.caseSelectList.length) return this.$u.toast('请选择需要指定的案件');
            form = {...this.specifyForm,caseUuids:this.caseSelectList,};
          }
          storeService.saveStore({...form,...this.queryForm,}).then(res => {
            this.$u.toast(res.msg);
            // this.$emit('ok',true);
            this.backPrev({
              paramKey:'refresh',
              param:true,
            })
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page{
  padding: 0;
}
.cearch_title{
  background-color: #F3F4F5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}
.title-content{
  width: 90%;
  margin: auto;
  // padding-top: 76rpx;
  .query-btn{
    position: fixed;
    width: 95%;
    bottom: var(--window-bottom,0);
  }
}
.content{
  width: 95%;
  margin: auto;
  .query-btn{
    display: flex;
    position: fixed;
    width: 95%;
    z-index: 999;
    bottom: var(--window-bottom,0);
    padding-bottom: 10px;
    .u-btn{
      width: 100%;
    }
  }
}

</style>
